<template>
	<section>
		<div class="head-wrap">
			<user-info></user-info>
			<personal-bar></personal-bar>
		</div>
		<div class="title-wrap">
			<span class="title">我的学生</span>
			<div @click="sendScore('bath',null)">
				批量发放积分
			</div>
		</div>
		<div class="info">
			<div class="sub work">
				<img src="@/assets/img/work.png">
				<div>
					<p>{{studentInfo?.model_num || 0}}</p>
					<span>团队作品</span>
				</div>
			</div>
			
			<div class="sub boutique">
				<img src="@/assets/img/boutique.png">
				<div>
					<p>{{studentInfo?.jing_num || 0}}</p>
					<span>精品数量</span>
				</div>
			</div>
			
			<div class="sub group">
				<img src="@/assets/img/group.png">
				<div>
					<p>{{studentInfo?.total || 0}}</p>
					<span>成员</span>
				</div>
			</div>
			
			<div class="sub total">
				<img src="@/assets/img/score-total.png">
				<div>
					<p>{{studentInfo?.score_num || 0}}</p>
					<span>总积分</span>
				</div>
			</div>
		</div>
		
		<ul class="student-wrap">
			<li v-for="(item, index) in studentList" :key="item.id" class="model-list">
				<div class="content">
					<div class="user-info">
						<div class="left">
							<img :src="item.headimg" v-if='item.headimg'>
							<img src="@/assets/img/user-logo.png" v-else/>
							<span>{{item.realname}}</span>
						</div>
						
						<div class="right" @click="sendScore('single',item)">
							<img src="@/assets/img/score.png"/>
							<span>发放积分</span>
						</div>
					</div>

					<div class="score-info">
						<div >
							<p class="residue">{{item.use_score}}</p>
							<span>累计消费积分</span>
						</div>
						
						<div>
							<p class="residue">{{item.score}}</p>
							<span>剩余积分</span>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<send-score-dialog v-if="isShowSend" @handleSend="handleSend" @close="isShowSend = false" :sendItem="sendItem"  :sendType="sendType" :studentList="studentList" :studentInfo="studentInfo"></send-score-dialog>
		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange" @page-change="handlePageChange"></common-pagination>
	</section>
</template>

<script>
	import CommonPagination from '@/components/CommonPagination';
	import SendScoreDialog from './components/sendScoreDialog';
	import PersonalBar from '@/components/PersonalBar';
	import UserInfo from './components/userInfo';
	import {getStudent} from '@/api/personal'
	import {mapState,mapActions} from 'vuex';
	export default {
		data() {
			return {
				searchData: {
					page: 1,
					size: 10
				},
				studentList: [],
				studentInfo:{},
				total:0,
				isShowSend:false,
				sendType:"single",
				sendItem:{}
			};
		},

		created() {
			this.getStudentList();
		},

		methods: {
			async getStudentList() {
				const {
					data,
					status
				} = await getStudent(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.studentList = data?.data?.list || [];
					this.total = data?.data?.total || 0;
					this.studentInfo = data?.data || {}
				} else {
					this.studentList = [];
					this.total = 0
					this.$message.warning(data && data.message || '获取失败');
				}
			},
			
			sendScore(type,item){
				this.sendType = type;
				this.sendItem = item;
				this.isShowSend = true
			},
			
			handleSend(){
				this.getStudentList()
				this.isShowSend = false;
			},
			
			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getStudentList();
			},
			
			handlePageChange(page) {
				this.searchData.page = page;
				this.getStudentList();
			}
		},
		components: {
			CommonPagination,
			SendScoreDialog,
			PersonalBar,
			UserInfo
		}

	};
</script>

<style lang="scss" scoped>
	.head-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.title-wrap{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 16px;
		.title{
			font-weight: bold;
			font-size: 18px;
			color: #000000;
		}
		div{
			@include cursor-style;
			padding: 8px 10px 8px 30px;
			background: url("../../assets/img/score.png") no-repeat 10px center;
			background-size: 16px;
			border-radius: 5px 5px 5px 5px;
			border: 2px solid #FF8A00;
			font-weight: 500;
			font-size: 14px;
			color: #FF8A00;
		}
	}
	
	.info{
		@include flex-row;
		justify-content: space-between;
		margin-bottom: 30px;
		.sub{
			width: 24%;
			height: 100px;
			@include flex-row;
			justify-content: center;
			border-radius: 10px 10px 10px 10px;
			img{
				display: block;
				width: 62px;
				height: 62px;
				margin-right: 40px;
			}
			div{
				@include flex-row;
				flex-direction: column;
				justify-content: space-between;
				span{
					font-size: 14px;
					color: #6C7B8A;
				}
				p{
					font-weight: bold;
					font-size: 30px;
				}
			}
		}
		.work{
			background: #E0F0FF;
			p{
				color: #0AB7FF;
			}
			
		}
		.boutique{
			background: #FFEEEE;
			p{
				color: #FF4747;
			}
		}
		.group{
			background: #F9EEFF;
			p{
				color: #B252FF;
			}
		}
		.total{
			background: #EEFFF9;
			p{
				color: #42D58F;
			}
		}
	}

	.student-wrap{
		display: flex;
		flex-wrap: wrap;
		.model-list{
			width: 20%;
			margin-bottom: 30px;
			.content{
				position: relative;
				width: 94%;
				height: 100%;
				padding: 15px;
				background: #F0F3F4;
				border-radius: 10px 10px 10px 10px;
				.user-info{
					@include flex-row;
					justify-content: space-between;
					div{
						@include flex-row;
					}
					.left{
						img{
							display: block;
							width:24px;
							height: 24px;
							border-radius: 50%;
							margin-right: 4px
						}
						span{
							font-size: 15px;
							color: #666666;
						}
					}
					
					.right{
						@include cursor-style;
						padding: 6px 8px;
						background: #DFE5E7;
						border-radius: 5px 5px 5px 5px;
						img{
							display: block;
							width:16px;
							height: 16px;
							margin-right: 6px
						}
						span{
							font-size: 12px;
							color: #666666;
						}
					}
				}
			
				.score-info{
					@include flex-row;
					justify-content: space-between;
					margin-top: 10px;
					div{
						width: 49%;
						height: 58px;
						background: #FFFFFF;
						border-radius: 0px 0px 0px 0px;
						@include flex-row;
						flex-direction: column;
						justify-content: center;
						span{
							font-size: 14px;
							color: #666666;
						}
						p{
							font-weight: bold;
							font-size: 20px;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>